import React, { Component } from 'react'
import { NavBar, Button } from 'components'

export default class CustomerServiceResult extends Component<any, any> {

    public state = {

    }

    public render(): JSX.Element {
        const { match } = this.props
        const { params } = match
        return (
            <div className="customerServiceResult">
                <NavBar title={<div style={{ fontSize: '0.97rem', color: '#222' }}>提交成功</div>} fixed={true} />
                <div className="customerServiceResult_resultImg">
                    <img src={require('../../../assets/submit_success.png')} />
                </div>
                <div className="customerServiceResult_resultText">
                    <div>
                        <p>售后服务单申请成功</p>
                        <p>申请时间：<span>{params.time}</span></p>
                        <p>申请类型：<span>{this.getStatusLabel(Number(params.type))}</span></p>
                    </div>
                </div>
                <div className="customerServiceResult_operation">
                    <div>
                        <Button
                            className="customerServiceResult_btn"
                            onClick={() => { this.goToUrl(`/My/serviceListApproval/${params.id}`) }}
                        >
                            进度查询
                        </Button>
                        <Button
                            className="customerServiceResult_btn"
                            onClick={() => { this.goToUrl(`/My/returnpolicy`) }}
                        >
                            售后首页
                        </Button>
                    </div>
                </div>
            </div>
        )
    }

    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }

    private getStatusLabel(status: number) {
        switch (status) {
            case 1: return '退货'
            case 2: return '换货'
            default: return ''
        }
    }
}